<template>
  <div class="amap-page-container">
    <p>
      文档: <a href="https://elemefe.github.io/vue-amap/#/zh-cn/examples/windows/info-window-custom-content" target="_blank">https://elemefe.github.io/vue-amap/#/zh-cn/examples/windows/info-window-custom-content</a>
    </p>
    <el-amap
      vid="amapDemo3"
      :center="center"
      :zoom="zoom"
      class="amap-demo">
      <el-amap-info-window :position="window.position">
        <div :style="slotStyle">
          <b>Hello {{ count }} times</b>
          <button @click="onClick">Add</button>
        </div>
      </el-amap-info-window>
    </el-amap>
  </div>
</template>

<script>
import VueAMap from 'vue-amap'

VueAMap.initAMapApiLoader({
  key: '59ec5ef06b273ce4796c72c130d7116c',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  v: '1.4.4'
})

export default {
  components: { VueAMap },
  data () {
    const center = [121.59996, 31.197646]

    return {
      zoom: 12,
      center,
      count: 0,
      slotStyle: {
        padding: '2px 8px',
        background: '#eee',
        color: '#333',
        border: '1px solid #aaa'
      },
      window: {
        position: [121.59996, 31.197646]
      }
    }
  },

  methods: {
    onClick () {
      this.count += 1
    }
  }
}
</script>

<style scoped>
  .amap-page-container {
    height: 500px;
  }
</style>
